<template>
    <!--记事本管理-->
    <div>
        <div class="options-wrapper">
            <div class="search">
                <div>
                    <DatePicker type="date"
                                placeholder="日期选择"
                                style="width: 200px"
                                :value="day"
                                @on-change="dayChange"
                    />
                </div>
            </div>
            <div class="left-options">
                <Button class="title-option" type="primary" @click="downloadByDay()">{{day}}下载</Button>
            </div>
        </div>
        <Table border :columns="columns" :data="list">
        </Table>
        <Page :total="total"
              :current="current"
              @on-change="change"
              :page-size="pageSize"
              class="page"/>
    </div>
</template>

<script>
    import {today} from "../../request/utils"

    export default {
        name: "Index",
        data() {
            return {
                day: today,  //日期
                current: 1,
                pageSize: 12,
                total: 10,
                list: [],
                columns: [    //表头
                    {
                        title: '日期',
                        key: 'createTime'
                    }, {
                        title: '老师',
                        key: 'name'
                    }, {
                        title: '内容',
                        key: 'content'
                    }
                ]
            }
        },
        mounted() {
            this.getList();
        },
        watch: {
            day: function () {
                this.getList()
            }
        },
        methods: {
            dayChange(date) {
                this.day = date;
            },
            async getList() {
                let {list} = await this.$api.ticklerList({
                    pageNum: this.current,
                    day: this.day
                })
                this.list = list
            },
            change(num) {
                this.current = num;
                this.getList();
            },
            //按天下载
            downloadByDay() {
                let a = document.createElement('a')
                a.href = "/api/tickler/download_by_day/" + this.day
                a.click();
                this.$parent.cancel()
            }
        }
    }
</script>

<style scoped>
    .options-wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .left-options {
        display: flex;
        align-items: flex-start;
    }

    .search {
        display: flex;
    }

    .title-option {
        display: inline-block;
        margin-right: 10px;
    }
</style>
